import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import { useEffect } from "react";

const PEOPLE_NUMBER = 1000;

const HIVChart = ({ title = "数据展示", name = "", data = [] }) => {
  const [chartOption, setChartOption] = useState({});
  
  useEffect(() => {
    const lHIV = [1000 - 100];
    const rHIV = [0];
    const dHIV = [100];
    const xLine = [0];
    let x = 0;
    const timer = setInterval(() => {
      let people = PEOPLE_NUMBER;
      let doubtHiv = dHIV[dHIV.length - 1] + parseInt(Math.random() * 50);
      let rightHiv = rHIV[rHIV.length - 1] + parseInt(Math.random() * dHIV[dHIV.length - 1]) / 10;
      let leftHiv = people - rightHiv - doubtHiv;
      if(leftHiv < 0) {
        rightHiv = rHIV[rHIV.length - 1];
        doubtHiv = dHIV[dHIV.length - 1];
        leftHiv = people - rightHiv - doubtHiv;
        if(doubtHiv > 0) {
            let temp = Math.random() * doubtHiv / 10;
            doubtHiv -= temp;
            rightHiv += temp;
        }
      }
      lHIV.push(leftHiv);
      rHIV.push(rightHiv);
      dHIV.push(doubtHiv);
      xLine.push(x+=5);
      setChartOption(
        getOption({
          lHIV: [...lHIV],
          rHIV,
          dHIV,
          xLine
        })
      );
    }, 1000);
  }, []);

  const getOption = data => {
    return {
      title: {
        text: name,
        left: "center"
      },
      tooltip: {
        trigger: 'axis',
        // formatter: "{a} <br/>{b} : {c}"
      },
      toolbox: {
        feature: {
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {},
          restore: {}
        }
      },
      legend: {
        left: "left",
        data: ["HIV +", "HIV -", "HIV ?"]
      },
      xAxis: {
        type: "category",
        name: "时间/周",
        nameLocation: "middle",
        boundaryGap: false,
        nameGap: 30,
        data: data.xLine,
      },
      grid: {
        left: "3%",
        right: "3%",
        bottom: "5%",
        containLabel: true
      },
      yAxis: {
        type: "value",
        name: "人数",
        minorTick: {
          show: true
        },
        minorSplitLine: {
          show: true
        }
      },
      series: [
        {
          name: "HIV +",
          type: "line",
          data: data.rHIV,
          smooth: true,
          lineStyle: {
              color: "rgb(215, 50, 41)"
          },
          symbol: 'diamond',
          showSymbol: false,
        },
        {
          name: "HIV -",
          type: "line",
          data: data.lHIV,
          smooth: true,
          symbol: 'circle',
          showSymbol: false,
          lineStyle: {
              color: "rgb(89, 176, 60)"
          }
        },
        {
          name: "HIV ?",
          type: "line",
          data: data.dHIV,
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: "rgb(52, 93, 169)"
        },
        symbol: "rect"
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title}>
      <ReactEcharts option={chartOption} />
    </ChartsWrap>
  );
};

export default HIVChart;
